<template>
  <div>
    <hello-world title="你好世界"/>
    <button @click="changeMsg">按钮</button>
    {{ msg }}
    {{ reverseMsg }}
    <hr>
    <button @click="changea">修改a</button>
    {{ a }}
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed, watch, onMounted } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  setup () {
    const msg = ref('这是msg')
    // 定义ref计算属性
    const reverseMsg = computed(() => {
      return msg.value.split('').reverse().join('')
    })
    /*  const reverseMsg = computed({
      get: () => {
        return msg.value.split('').reverse().join('')
      },
      set: (val) => {
        // 修改依赖
      }
    }) */
    /*
      传入初始值 自动 创建一个对象 值 作为 对象 value属性，并使用Proxy代理，
      返回该对象的代理对象
    */
    const changeMsg = () => {
      msg.value = '值改变了'
    }
    // watchEffect 做侦听器
    /* watchEffect(() => {
      console.log(msg.value)
      console.log('msg改变了')
    }) */
    // watch侦听
    watch(msg, (newVal, oldVal) => {
      console.log('msg改变了', newVal)
    })
    // reactive定义动态数据 一般用来定义对象
    const data = reactive({
      a: '这是a属性',
      b: '这是b属性',
      changea () {
        data.a = 'a的值改变了'
      }
    })
    watch(() => data.a, (newVal) => {
      console.log('a改变了值是', newVal)
    })

    onMounted(() => {
      console.log('组件渲染成功了')
    })
    return {
      msg,
      changeMsg,
      reverseMsg,
      ...toRefs(data)
    }
  },
  components: {
    HelloWorld
  }
}
</script>

<style lang="scss" scoped>

</style>
